<template>
  <div>
    <div class="app-container">
      <div class="app-container-inner">
        <div class="header flex-justify-between">
          <div class="name flex-align-center">
            <span>参数模块</span>
            <el-input v-model.trim="input" class="el-input" />
          </div>
          <div class="btns flex-align-center">
            <button class="btn-save">保存</button>
            <button class="btn-dele">取消</button>
          </div>
        </div>
      </div>
    </div>

    <div class="app-container">
      <div class="app-container-inner">
        <div class="header flex-justify-between">
          <div class="btns flex-align-center">
            <button class="btn btn-bg2" @click="addDialog = true">添加参数</button>
          </div>
        </div>
        <div class="table">
          <el-table border stripe resizable :data="tableData">
            <el-table-column show-overflow-tooltip prop="date" label="字段名称" width="170" />
            <el-table-column show-overflow-tooltip prop="date" label="字段类型" width="170" />
            <el-table-column show-overflow-tooltip prop="date" label="字段内容" />
            <el-table-column show-overflow-tooltip prop="name" label="最后更新时间" width="170" />
            <el-table-column show-overflow-tooltip fixed="right" label="操作" width="60">
              <template #default="scope">
                <div class="flex-center">
                  <button class="btn-table detail" @click="viewDetail(scope.$index)">详细</button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 添加字段弹窗 -->
        <el-dialog
          v-model="addDialog"
          title="添加字段"
          width="500px"
          :draggable="true"
          :destroy-on-close="true"
          :close-on-click-modal="false"
          class="add-dialog"
          top="8vh"
          :open="clearValue()"
          :close="clearList()"
        >
          <div class="cards">
            <div class="card">
              <span>字段名称</span>
              <el-input v-model.trim="input" class="name" />
            </div>
            <div class="card">
              <label>字段类型</label>
              <el-select v-model="value" class="mr10" filterable clearable @change="handleChange">
                <el-option v-for="item in options" :value="item.value"
              /></el-select>
            </div>
            <div class="card">
              <label>是否必填</label>
              <el-select v-model="value" class="mr10" filterable clearable>
                <el-option v-for="item in options2" :value="item.value"
              /></el-select>
            </div>
            <div v-show="assoShow" class="card">
              <label>关联类</label>
              <el-select v-model="value" class="asso" filterable clearable>
                <el-option v-for="item in options2" :value="item.value"
              /></el-select>
            </div>
            <div v-show="attrShow" class="card">
              <span>默认属性</span>
              <el-input v-model.trim="input" class="name" />
            </div>
            <div v-show="textShow" class="field-text">字段内容</div>
            <div v-show="textShow" id="list" class="list">
              <div class="content">
                <div class="item">
                  <div class="text"><input type="text" class="text-inp" /></div>
                  <div class="delete" @click="handleClick">删除</div>
                </div>
              </div>
            </div>
            <span v-show="textShow" class="addText" @click="addText">+ 新增</span>
            <div v-show="phoShow" class="card">
              <span>最大尺寸</span>
              <div class="sizes">
                <el-input v-model.trim="size" class="size" />
                <span>X</span>
                <el-input v-model.trim="size" class="size" />
              </div>
            </div>
            <p v-show="phoShow">最大尺寸是像素PX,超过任意一个尺寸，进行预压缩上传</p>
            <div v-show="annexShow" class="card">
              <span>上传附件</span>
              <el-input v-model.trim="annex" class="annex" />
            </div>
            <p v-show="annexShow">上传附件，多个逗号分隔</p>
            <div v-show="numShow" class="card">
              <span>上传数量</span>
              <el-input v-model.trim="input" class="number" />
            </div>
          </div>
          <div class="btns">
            <button class="btn-save">保存</button>
            <button class="btn-cancel" @click="addDialog = false">取消</button>
          </div>
        </el-dialog>

        <!-- 编辑字段弹窗 -->
        <el-dialog
          v-model="detailDialog"
          title="编辑字段"
          width="500px"
          :draggable="true"
          :destroy-on-close="true"
          :close-on-click-modal="false"
          class="edit-dialog"
          top="8vh"
          :open="clearValue()"
          :close="clearList()"
        >
          <div class="cards">
            <div class="card">
              <span>字段名称</span>
              <el-input v-model.trim="input" class="name" />
            </div>
            <div class="card">
              <label>字段类型</label>
              <el-select v-model="value" class="mr10" filterable clearable @change="handleChange">
                <el-option v-for="item in options" :value="item.value"
              /></el-select>
            </div>
            <div class="card">
              <label>是否必填</label>
              <el-select v-model="value" class="mr10" filterable clearable>
                <el-option v-for="item in options2" :value="item.value"
              /></el-select>
            </div>
            <div v-show="assoShow" class="card">
              <label>关联类</label>
              <el-select v-model="value" class="asso" filterable clearable>
                <el-option v-for="item in options2" :value="item.value"
              /></el-select>
            </div>
            <div v-show="attrShow" class="card">
              <span>默认属性</span>
              <el-input v-model.trim="input" class="name" />
            </div>
            <div v-show="textShow" class="field-text">字段内容</div>
            <div v-show="textShow" id="list" class="list">
              <div class="content">
                <div class="item">
                  <div class="text"><input type="text" class="text-inp" /></div>
                  <div class="delete" @click="handleClick">删除</div>
                </div>
              </div>
            </div>
            <span v-show="textShow" class="addText" @click="addText">+ 新增</span>
            <div v-show="phoShow" class="card">
              <span>最大尺寸</span>
              <div class="sizes">
                <el-input v-model.trim="size" class="size" />
                <span>X</span>
                <el-input v-model.trim="size" class="size" />
              </div>
            </div>
            <p v-show="phoShow">最大尺寸是像素PX,超过任意一个尺寸，进行预压缩上传</p>
            <div v-show="annexShow" class="card">
              <span>上传附件</span>
              <el-input v-model.trim="input" class="annex" />
            </div>
            <p v-show="annexShow">上传附件，多个逗号分隔</p>
            <div v-show="numShow" class="card">
              <span>上传数量</span>
              <el-input v-model.trim="input" class="number" />
            </div>
          </div>
          <div class="btns">
            <div class="left">
              <button class="btn-delete">删除</button>
            </div>
            <div class="right">
              <button class="btn-save">保存</button>
              <button class="btn-cancel" @click="detailDialog = false">取消</button>
            </div>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, render, h } from 'vue'
  import * as _ from 'lodash'
  import routeComponentName from '@/config/route-component-name'

  defineOptions({
    name: routeComponentName.setting.partAddAttrSet,
  })

  const input = ref('')
  const value = ref('')
  const size = ref(66)
  const annex = ref('.jpg,.png,.gif')
  const addDialog = ref(false)
  const detailDialog = ref(false)
  const attrShow = ref(true)
  const phoShow = ref(false)
  const textShow = ref(false)
  const numShow = ref(false)
  const annexShow = ref(false)
  const assoShow = ref(false)
  const list = ref([])

  // 查看字段详细
  const viewDetail = (n: number) => {
    detailDialog.value = true
  }

  // 添加字段
  const clearValue = () => {
    attrShow.value = true
    phoShow.value = false
    numShow.value = false
    annexShow.value = false
    assoShow.value = false
  }

  // 删除字段内容
  const handleClick = (e) => {
    if (e.target.innerText == '删除') {
      e.target.parentNode.remove()
    }
  }

  // 新增字段内容
  const addText = () => {
    const input = h('input', {
      type: 'text',
      class: 'text-inp',
      id: 'text-inp' + (list.value.length + 1),
    })
    const div1 = h('div', { class: 'text' }, input)
    const div2 = h(
      'div',
      {
        class: 'delete',
      },
      '删除',
    )
    const div3 = h('div', { class: 'item' }, [div1, div2])
    list.value.push(div3)
    const arr = _.cloneDeep(list.value)
    const ul = h('div', { class: 'content', onclick: handleClick }, arr)
    const ele = document.getElementById('list')
    render(ul, ele)
  }

  // 清空字段内容
  const clearList = () => {
    list.value = []
  }

  const handleChange = (val: any) => {
    if (
      val == '文本' ||
      val == '多行文本' ||
      val == '富文本' ||
      val == '数字' ||
      val == '手机' ||
      val == '邮箱'
    ) {
      attrShow.value = true
    } else {
      attrShow.value = false
    }

    if (val == '单选' || val == '多选') {
      textShow.value = true
      attrShow.value = false
    } else {
      textShow.value = false
    }

    if (val == '单图' || val == '多图') {
      phoShow.value = true
      numShow.value = true
      attrShow.value = false
    } else if (val == '附件') {
      phoShow.value = false
      annexShow.value = true
      numShow.value = true
      attrShow.value = false
    } else {
      phoShow.value = false
      annexShow.value = false
      numShow.value = false
    }

    if (val == '单选关联' || val == '多选关联') {
      assoShow.value = true
      attrShow.value = false
    } else {
      assoShow.value = false
    }
  }

  const options = [
    {
      value: '文本',
    },
    {
      value: '多行文本',
    },
    {
      value: '富文本',
    },
    {
      value: '数字',
    },
    {
      value: '手机',
    },
    {
      value: '邮箱',
    },
    {
      value: '单选',
    },
    {
      value: '多选',
    },
    {
      value: '地址',
    },
    {
      value: '日期',
    },
    {
      value: '日期时间',
    },
    {
      value: '单图',
    },
    {
      value: '多图',
    },
    {
      value: '附件',
    },
    {
      value: '单选关联',
    },
    {
      value: '多选关联',
    },
  ]

  const options2 = [
    {
      value: '选填',
    },
    {
      value: '必填',
    },
  ]

  const tableData = [
    {
      date: '20230602590500824',
      name: '2016-05-02',
      state: '启用',
      city: '自动派单测试',
      address: 'No. 189, Grove St, Los Angeles',
      zip: '广西壮族自治区-百色市-隆林各族自治县--东门东街道18号',
      tag: 'Home',
    },
    {
      date: '20230602590500824',
      name: '2016-05-02',
      state: '不启用',
      city: '自动派单测试',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
  ]
</script>

<style scoped lang="scss">
  @import './index.scss';
</style>
